<script setup lang="ts">
import type { IMetaWarehouse } from '@/api/interface/rescue/meta/metaWarehouse'

interface Props {
  /** 仓库数据 */
  warehouse: IMetaWarehouse.Row
  /** 是否选中 */
  selected?: boolean
  /** 是否显示复选框 */
  showCheckbox?: boolean
}

defineOptions({
  name: 'WarehouseCard',
})

const props = withDefaults(defineProps<Props>(), {
  selected: false,
  showCheckbox: false,
})

const emit = defineEmits<{
  cardClick: [warehouse: IMetaWarehouse.Row]
  selectChange: [selected: boolean]
  viewDetail: [warehouse: IMetaWarehouse.Row]
  edit: [warehouse: IMetaWarehouse.Row]
  delete: [warehouse: IMetaWarehouse.Row]
}>()

// 卡片点击
function onCardClick() {
  emit('cardClick', props.warehouse)
}

// 选择变化
function onSelectChange(checked: boolean) {
  emit('selectChange', checked)
}

// 点击复选框区域
function onCheckboxClick(event: Event) {
  event.stopPropagation()
  onSelectChange(!props.selected)
}

// 查看详情
function onViewDetail() {
  emit('viewDetail', props.warehouse)
}

// 编辑
function onEdit() {
  emit('edit', props.warehouse)
}

// 删除
function onDelete() {
  emit('delete', props.warehouse)
}

// 获取仓库图标
function getWarehouseIcon() {
  if (props.warehouse.common) {
    return 'share'
  }
  return 'location'
}

// 获取图标容器样式类
function getIconContainerClass() {
  if (props.warehouse.common) {
    return 'icon-container--public'
  }
  return 'icon-container--private'
}

// 获取图标颜色
function getIconColor() {
  if (props.warehouse.common) {
    return '#007AFF'
  }
  return '#FF9500'
}

// 获取左侧彩色条样式
function getAccentClass() {
  if (props.warehouse.common) {
    return 'card-accent--public'
  }
  return 'card-accent--private'
}

// 获取标签样式类
function getTagClass(type: 'enable' | 'common') {
  if (type === 'enable') {
    return props.warehouse.enable ? 'tag-item--enabled' : 'tag-item--disabled'
  } else {
    return props.warehouse.common ? 'tag-item--public' : 'tag-item--private'
  }
}

// 获取标签颜色
function getTagColor(type: 'enable' | 'common') {
  if (type === 'enable') {
    return props.warehouse.enable ? '#34C759' : '#FF3B30'
  } else {
    return props.warehouse.common ? '#007AFF' : '#FF9500'
  }
}
</script>

<template>
  <view class="warehouse-card" :class="{ selected }" @click="onCardClick">
    <!-- 右上角复选框 -->
    <view v-if="showCheckbox" class="checkbox-wrapper" @click="onCheckboxClick">
      <view class="custom-checkbox" :class="{ 'custom-checkbox--checked': selected }">
        <wd-icon v-if="selected" name="check" size="14" color="white" class="check-icon" />
      </view>
    </view>

    <!-- 左侧彩色条 -->
    <view class="card-accent" :class="getAccentClass()" />

    <!-- 主要内容 -->
    <view class="card-content">
      <!-- 左侧图标区域 -->
      <view class="icon-wrapper">
        <view class="icon-container" :class="getIconContainerClass()">
          <wd-icon
            :name="getWarehouseIcon()"
            size="24"
            :color="getIconColor()"
            class="warehouse-icon"
          />
        </view>

        <!-- 状态标识 -->
        <view class="status-badge" :class="{ 'status-badge--disabled': !warehouse.enable }">
          <wd-icon
            :name="warehouse.enable ? 'check' : 'close'"
            size="10"
            color="white"
            class="status-icon"
          />
          <text class="status-text">
            {{ warehouse.enable ? '启用' : '禁用' }}
          </text>
        </view>
      </view>

      <!-- 右侧信息区域 -->
      <view class="info-section">
        <!-- 头部信息 -->
        <view class="info-header">
          <text class="warehouse-name">
            {{ warehouse.name || '未命名仓库' }}
          </text>
        </view>

        <!-- 地址信息 -->
        <view class="address-info">
          <view v-if="warehouse.address" class="address-item">
            <wd-icon name="location" size="12" color="#8E8E93" />
            <text class="address-text">
              {{ warehouse.address }}
            </text>
          </view>
          <view v-if="warehouse.detailAddress" class="address-item">
            <wd-icon name="map" size="12" color="#8E8E93" />
            <text class="detail-address-text">
              {{ warehouse.detailAddress }}
            </text>
          </view>
        </view>

        <!-- 标签信息 -->
        <view class="tags-section">
          <view class="tag-item" :class="getTagClass('enable')">
            <wd-icon
              :name="warehouse.enable ? 'check-circle' : 'close-circle'"
              size="12"
              :color="getTagColor('enable')"
            />
            <text class="tag-text">
              {{ warehouse.enable ? '启用' : '禁用' }}
            </text>
          </view>
          <view class="tag-item" :class="getTagClass('common')">
            <wd-icon
              :name="warehouse.common ? 'share' : 'lock'"
              size="12"
              :color="getTagColor('common')"
            />
            <text class="tag-text">
              {{ warehouse.common ? '公共仓库' : '私有仓库' }}
            </text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <wd-button
            size="small"
            type="text"
            class="action-btn view-btn"
            @click.stop="onViewDetail"
          >
            <wd-icon name="eye" size="14" />
            <text>详情</text>
          </wd-button>
          <wd-button size="small" type="text" class="action-btn edit-btn" @click.stop="onEdit">
            <wd-icon name="edit" size="14" />
            <text>编辑</text>
          </wd-button>
          <wd-button size="small" type="text" class="action-btn delete-btn" @click.stop="onDelete">
            <wd-icon name="delete" size="14" />
            <text>删除</text>
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// Apple 设计系统变量
$system-blue: #007aff;
$system-green: #34c759;
$system-orange: #ff9500;
$system-red: #ff3b30;
$system-gray: #8e8e93;
$label-primary: #000000;
$label-secondary: rgba(60, 60, 67, 0.6);
$background-primary: #ffffff;
$background-secondary: #f2f2f7;
$separator: rgba(60, 60, 67, 0.36);

.warehouse-card {
  background-color: $background-primary;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;

  &.selected {
    border: 2px solid $system-blue;
    background-color: rgba(0, 122, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  &:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  // 右上角复选框
  .checkbox-wrapper {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;

    &:active {
      transform: scale(0.9);
    }

    .custom-checkbox {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 2px solid rgba(0, 122, 255, 0.3);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      &--checked {
        background: linear-gradient(135deg, $system-blue 0%, #5ac8fa 100%);
        border-color: $system-blue;
        box-shadow: 0 2px 12px rgba(0, 122, 255, 0.3);

        .check-icon {
          animation: checkBounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
      }

      .check-icon {
        transition: all 0.2s ease;
      }
    }
  }

  @keyframes checkBounce {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  // 左侧彩色条
  .card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px 0 0 2px;

    &--public {
      background: linear-gradient(135deg, $system-blue 0%, #5ac8fa 100%);
    }

    &--private {
      background: linear-gradient(135deg, $system-orange 0%, #ffcc02 100%);
    }
  }

  .card-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-left: 8px;
  }

  .icon-wrapper {
    position: relative;
    flex-shrink: 0;
  }

  .icon-container {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &--public {
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(90, 200, 250, 0.1) 100%);
      border: 2px solid rgba(0, 122, 255, 0.2);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(0, 122, 255, 0.05) 0%,
          rgba(90, 200, 250, 0.05) 100%
        );
        border-radius: 14px;
      }
    }

    &--private {
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, rgba(255, 204, 2, 0.1) 100%);
      border: 2px solid rgba(255, 149, 0, 0.2);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 149, 0, 0.05) 0%,
          rgba(255, 204, 2, 0.05) 100%
        );
        border-radius: 14px;
      }
    }

    .warehouse-icon {
      position: relative;
      z-index: 1;
    }
  }

  .status-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 2px 6px;
    border-radius: 8px;
    background-color: rgba(52, 199, 89, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.3);

    .status-icon {
      flex-shrink: 0;
    }

    .status-text {
      font-size: 9px;
      color: white;
      font-weight: 600;
    }

    &--disabled {
      background-color: rgba(142, 142, 147, 0.9);
    }
  }

  .info-section {
    flex: 1;
    min-width: 0;
  }

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;

    .warehouse-name {
      font-size: 18px;
      font-weight: 600;
      color: $label-primary;
      line-height: 1.3;
      flex: 1;
      // 文本省略处理
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .address-info {
    margin-bottom: 12px;

    .address-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 6px;

      &:last-child {
        margin-bottom: 0;
      }

      .address-text {
        font-size: 14px;
        color: $label-secondary;
        line-height: 1.4;
        flex: 1;
        // 文本省略处理
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .detail-address-text {
        font-size: 13px;
        color: $system-gray;
        line-height: 1.4;
        flex: 1;
        // 文本省略处理
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .tags-section {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;

    .tag-item {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      border: 1px solid;

      .tag-text {
        font-size: 11px;
        font-weight: 500;
      }

      &--enabled {
        background-color: rgba(52, 199, 89, 0.1);
        border-color: rgba(52, 199, 89, 0.2);
        .tag-text {
          color: $system-green;
        }
      }

      &--disabled {
        background-color: rgba(255, 59, 48, 0.1);
        border-color: rgba(255, 59, 48, 0.2);
        .tag-text {
          color: $system-red;
        }
      }

      &--public {
        background-color: rgba(0, 122, 255, 0.1);
        border-color: rgba(0, 122, 255, 0.2);
        .tag-text {
          color: $system-blue;
        }
      }

      &--private {
        background-color: rgba(255, 149, 0, 0.1);
        border-color: rgba(255, 149, 0, 0.2);
        .tag-text {
          color: $system-orange;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 8px;

    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 12px;
      border-radius: 10px;
      transition: all 0.2s ease;
      font-weight: 500;
      min-height: 32px;
      font-size: 12px;
      border: 1px solid;

      &.view-btn {
        color: $system-blue;
        background-color: rgba(0, 122, 255, 0.1);
        border-color: rgba(0, 122, 255, 0.2);

        &:active {
          background-color: rgba(0, 122, 255, 0.2);
          transform: scale(0.98);
        }
      }

      &.edit-btn {
        color: $system-orange;
        background-color: rgba(255, 149, 0, 0.1);
        border-color: rgba(255, 149, 0, 0.2);

        &:active {
          background-color: rgba(255, 149, 0, 0.2);
          transform: scale(0.98);
        }
      }

      &.delete-btn {
        color: $system-red;
        background-color: rgba(255, 59, 48, 0.1);
        border-color: rgba(255, 59, 48, 0.2);

        &:active {
          background-color: rgba(255, 59, 48, 0.2);
          transform: scale(0.98);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 375px) {
  .warehouse-card {
    padding: 12px;

    .checkbox-wrapper {
      top: 8px;
      right: 8px;

      .custom-checkbox {
        width: 20px;
        height: 20px;

        .check-icon {
          font-size: 12px;
        }
      }
    }

    .card-content {
      gap: 12px;
    }

    .icon-container {
      width: 50px;
      height: 50px;
    }

    .info-header {
      .warehouse-name {
        font-size: 16px;
        -webkit-line-clamp: 1;
      }
    }

    .address-info {
      .address-item {
        .address-text {
          font-size: 13px;
        }

        .detail-address-text {
          font-size: 12px;
        }
      }
    }

    .action-buttons {
      gap: 6px;

      .action-btn {
        padding: 6px 8px;
        min-height: 28px;
        font-size: 11px;
      }
    }
  }
}

// 大屏幕优化
@media (min-width: 768px) {
  .warehouse-card {
    padding: 20px;

    .checkbox-wrapper {
      top: 16px;
      right: 16px;

      .custom-checkbox {
        width: 28px;
        height: 28px;

        .check-icon {
          font-size: 16px;
        }
      }
    }

    .card-content {
      gap: 20px;
    }

    .icon-container {
      width: 80px;
      height: 80px;
    }

    .info-header {
      .warehouse-name {
        font-size: 20px;
      }
    }

    .action-buttons {
      gap: 12px;

      .action-btn {
        padding: 10px 16px;
        min-height: 36px;
        font-size: 13px;
      }
    }
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .warehouse-card {
    background-color: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);

    .checkbox-wrapper {
      .custom-checkbox {
        background: rgba(44, 44, 46, 0.9);
        border-color: rgba(0, 122, 255, 0.4);
      }
    }

    .info-header {
      .warehouse-name {
        color: #ffffff;
      }
    }

    .address-info {
      .address-item {
        .address-text {
          color: rgba(255, 255, 255, 0.6);
        }

        .detail-address-text {
          color: rgba(255, 255, 255, 0.4);
        }
      }
    }

    .action-buttons {
      border-top-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>
